
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';

/**
 * Flutter 布局示例
 * @auth cmw
 * @date 2020-02-07
 */
class LayoutDemoPage extends StatelessWidget {
  BuildContext _context;
  @override
  Widget build(BuildContext context) {
    _context = context;
    Widget imageSection = createImageSection();
    Widget titleSection = createTitleSection();
    Widget buttonSection = createButtonSection();
    Widget textRemarkSection = createTextRemarkSection();
    return MaterialApp(
        title: 'Flutter 布局基础组件示例',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 布局基础组件示例'),
          backgroundColor: ColorUtil.color("#fe45dd"),
          leading: GestureDetector(child: Icon(Icons.arrow_back),
          onTap: (){
            Navigator.pop(context);
          },),
        ),
        body:  ListView(
          children: <Widget>[
            imageSection,
            titleSection,
            buttonSection,
            textRemarkSection
          ],
        )
        )
    );
  }

  /**
   * 创建 Title Section
   */
  createTitleSection(){
    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      color: Colors.white,
      child:Row(children: <Widget>[
        Expanded(child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(bottom: 10),
              child:  Text("Oeschinen Lake Campground", style: TextStyle(fontWeight: FontWeight.bold),),
            ),
            Text(  'Kandersteg, Switzerland',style: TextStyle(color: Colors.grey[500], fontSize: 12),)
          ],
        ),),
        Icon(Icons.star,color: Colors.redAccent),
        Text("41")
      ],)
    );
    return titleSection;
  }

  createIconButtons(IconData icon, String label){
    Color _color = Theme.of(_context).primaryColor;
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(icon, color:_color),
        Container(
          margin: EdgeInsets.only(top: 8),
          child: Text(label ,style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: _color),),
        )

      ],
    );
  }

  Widget createButtonSection() {
    Widget btn_phone = createIconButtons(Icons.phone, "CALL");
    Widget btn_Near = createIconButtons(Icons.near_me, "ROUTE");
    Widget btn_share = createIconButtons(Icons.share, "SHARE");
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //在行的主轴方向通过 MainAxisAlignment.spaceEvenly 平均的分配每个列占据的行空间
        children: <Widget>[
          btn_phone,
          btn_Near,
          btn_share
        ],
      ),
    );
  }

  Widget createTextRemarkSection() {
    return Container(
      padding: EdgeInsets.all(32.0),
      child: Text(
          '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true,
      ),
    );
  }

  Widget createImageSection() {
//    return Image(image: AssetImage('images/lake.jpg'),width: 600, height: 240,fit: BoxFit.cover);
    return Image.asset("images/lake.jpg", width: 600, height: 240,fit: BoxFit.cover);//BoxFit.cover 告诉框架，图像应该尽可能小，但覆盖整个渲染框
  }
}



